<html>
<head>
<title>Sprite Keypad - Prototype</title>
<link id="keypad-css" rel="stylesheet" type="text/css" href="style/keypad/keypad-100.css" />

<style type='text/css'>
body{
font-family: arial;
}
ul.keypad,ul.keypad-disabled {
background-color: lightgrey;	
}

</style>
<% 
 String JS_PREFIX="";
String  JS_KEYPAD_PATH = "keypad"; 
%>

<script><!--
var _kp1,_kp2;
function pageLoaded() {
  //alert('page loaded');
  _kp1=new Keypad('thekeypad-1', function(val) {alert("Keypad 1\nKey Selected "+val); } );
  _kp2=new Keypad('thekeypad-2', function(val) {alert("Keypad 2\nKey Selected "+val); } );
  _kp2.setEnabled(false);
}
</script>

</head>

<body onload="pageLoaded()">

Sprite-Based Numeric KEYPAD (<a href='http://code.google.com/p/sprite-keypad/'>sprite-keypad</a>)
<div style='position: relative; height: 500px;'>
<div id='thekeypad-1' onclick='clickster(this);' style='top: 0; position: absolute; width: 300px; padding: 0px; background-color: inherit; border: green thin solid'></div>
<div id='thekeypad-2' onclick='clickster(this);' style='top: 0; left: 340; position: absolute; width: 300px; padding: 0px; background-color: inherit; border: green thin solid'></div>

<div style='position: absolute; top: 500px; left: 100px'>
<button onclick="_kp1.setEnabled(true);">enable-1</button>
<button onclick="_kp1.setEnabled(false);">disable-1</button>
</div>
<div style='position: absolute; top: 500px; left: 400px;'>
<button onclick="_kp2.setEnabled(true);">enable-2</button>
<button onclick="_kp2.setEnabled(false);">disable-2</button>
</div>


</div>

<script type='text/javascript' src='<%= JS_PREFIX %>js/<%= JS_KEYPAD_PATH %>/keypad.js'></script>


</body>

</html>